'use strict';
import React, {Component} from 'react';
import {
    View,
    TextInput,
    Text,
    TouchableOpacity,
    Image,
    Keyboard,
    StyleSheet,
} from 'react-native';
import Toast from '../Utils/toast';
import FoundAPIService from "../Commom/FoundAPIService";
import Global from '../Commom/GlobalConst';
let styles = StyleSheet.create({
    contain: {
        padding: 10,
        backgroundColor: 'white',
        alignItems: 'center',
        flexDirection: 'row',
        borderTopWidth: 1,
        borderTopColor: '#F2F3F5',
    },
    content: {
        padding: 3,
        backgroundColor: '#F2F3F5',
        borderRadius: 5,
        flex: 1,
        flexDirection: 'row',
        alignItems: 'center',
        height: 35,
    },
    inputImg: {
        width: 15,
        height: 15,
        marginRight: 5,
    },
    inputText: {
        fontSize: 16,
        color: 'black',
        flex: 1,
        padding: 0
    },
    sendBtnBox: {
        backgroundColor: '#38D68B',
        width: 55,
        marginLeft: 10,
        height: 35,
        alignItems: 'center',
        justifyContent: 'center',
        borderRadius: 5,
    },
    sendBtn: {
        color: 'white',
        fontSize: 16,
    }
});

class BottomInputText extends Component {
    constructor(props) {
        super(props);
        this.state = {
            content: '',
            id: 0,
        };
    }

    componentDidMount() {
        this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', (e) => this._KeyboardDidShow(e));
        this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', () => this._KeyboardDidHide());
    }

    comment() {
        Keyboard.dismiss();
        if (Global.Const.token == '') {
            this.props.goLoginPage()&& this.props.goLoginPage();
            return;
        }
        let id = this.props.id;
        FoundAPIService.comment(Global.Const.token, Global.Const.registeredId, id, this.state.content).then((ret)=> {
            this.setState({
                content: '',
            });
            Toast.show('评论成功');
        }).catch((err)=> {
        });

    }

    _KeyboardDidShow(e) {
        this.props.keyboardDidShow && this.props.keyboardDidShow(e.endCoordinates.height);
    }

    _KeyboardDidHide() {
        this.props.keyboardDidHide && this.props.keyboardDidHide();
    }

    componentWillUnMount() {
        Keyboard.dismiss();
        this.keyboardDidShowListener.remove();
        this.keyboardDidHideListener.remove();
    }

    onSubmitEnding(event) {
        Keyboard.dismiss();
    }

    render() {
        return (
            <View style={[styles.contain]}>
                <View style={styles.content}>
                    <Image style={styles.inputImg} source={require('../../Image/edit.png')} resizeMode={'contain'}/>
                    <TextInput
                        placeholder={'写评论..'}
                        maxLength={30}
                        underlineColorAndroid={'rgba(0,0,0,0)'}
                        style={styles.inputText}
                        textAlignVertical={'center'}
                        returnKeyType={'done'}
                        value={this.state.content}
                        onChangeText={content => this.setState({ content })}
                        onSubmitEditing={(event) => this.onSubmitEnding(event)}
                        onEndEditing={(event) => this.onSubmitEnding(event)}
                    />
                </View>
                <TouchableOpacity
                    style={styles.sendBtnBox}
                    onPress={() => this.comment()}>
                    <Text style={styles.sendBtn}>发送</Text>
                </TouchableOpacity>
            </View>
        )
    }

}

export default BottomInputText;